<template>
  <div class="wrap">
    <div v-if="nav.id === 0" class="all-wrap">
      <div class="entry-wrap">
        <div>
          <div class="title">热门词条榜</div>
          <ul>
            <li
              v-for="(item, index) in hotEntry"
              :key="index"
              @click="showProfile(item)"
            >
              {{index+1}}<span>{{item.title}}</span>
            </li>
          </ul>
        </div>
        <div>
          <div class="title">最新词条榜</div>
          <ul>
            <li
              v-for="(item, index) in newEntry"
              :key="index"
              @click="showProfile(item)"
            >
              {{index+1}}<span>{{item.title}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="recommend-wrap">
        <div class="title">casino 实力推荐</div>
        <el-row class="block-wrap" :gutter="10">
          <el-col
            v-for="(item, index) in recommendList"
            :key="index"
            :span="3"
          >
            <div class="img-wrap">
              <img :src="`${$baseImgUrl}${item.img}`"/>
            </div>
            <div class="name">{{item.name}}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else class="list-wrap">
      <ul>
        <li
          v-for="(item, index) in entryList"
          :key="index"
        >
          <div
            class="word"
          >
            <span class="title" @click="turn">{{item.title}}</span>
            <span class="suffix" @click.stop>【{{item.suffix}}】</span>
          </div>
          <div class="date">{{item.date}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { id: 0, key: 'all', title: '全部百科' },
        { id: 1, title: '博彩名词' },
        { id: 2, title: '博彩企业' },
        { id: 3, title: '博彩游戏' },
        { id: 4, title: '博彩责任' },
        { id: 5, title: '博彩担保' },
        { id: 6, title: '俱乐部' }
      ],
      hotEntry: [
        { title: '娱乐场博彩或投注信贷法律制度', url: '' },
        { title: '博彩牌照', url: '' },
        { title: 'BBIN', url: '' },
        { title: '骰宝', url: '' },
        { title: 'Playtech（PT）', url: '' },
        { title: '龙虎斗', url: '' },
        { title: '轮盘', url: '' },
        { title: '大西洋城', url: '' },
        { title: '三公', url: '' },
        { title: '越南涂山赌场', url: '' }
      ],
      newEntry: [
        { title: '娱乐场博彩或投注信贷法律制度', url: '' },
        { title: '博彩牌照', url: '' },
        { title: 'BBIN', url: '' },
        { title: '骰宝', url: '' },
        { title: 'Playtech（PT）', url: '' },
        { title: '龙虎斗', url: '' },
        { title: '轮盘', url: '' },
        { title: '大西洋城', url: '' },
        { title: '三公', url: '' },
        { title: '越南涂山赌场', url: '' }
      ],
      entryList: [
        { title: '娱乐场博彩或投注信贷法律制度', url: '', date: '2020-06-06 09:44:23' },
        { title: '博彩牌照', url: '', date: '2020-06-06 09:44:23' },
        { title: 'BBIN', url: '', date: '2020-06-06 09:44:23' },
        { title: '骰宝', url: '', date: '2020-06-06 09:44:23' },
        { title: 'Playtech（PT）', url: '', date: '2020-06-06 09:44:23' },
        { title: '龙虎斗', url: '', date: '2020-06-06 09:44:23' },
        { title: '轮盘', url: '', date: '2020-06-06 09:44:23' },
        { title: '大西洋城', url: '', date: '2020-06-06 09:44:23' },
        { title: '三公', url: '', date: '2020-06-06 09:44:23' },
        { title: '越南涂山赌场', url: '', date: '2020-06-06 09:44:23' }
      ],
      recommendList: [
        { img: 'home/warrant01.png', name: 'bet365' }
      ]
    };
  },
  methods: {
    showProfile(data) {
      this.$router.push({
        name: 'PediaProfile',
        params: data.id
      });
    }
  }
};
</script>

<style>

</style>
